<template>
    <view class="card" :style="{'background': getBack(item.vipCardMemberLogType)}">
        <view class="title common-flex-between">
            <view>
                <text class="icon-vip icon-btn"/>
                <text>{{item.vipCardMemberLogName}}</text>
            </view>
            <text style="font-size: 19rpx;">NO.{{item.vipCardMemberLogId}}</text>
        </view>
        <view class="content common-flex-between">
            <view>
                <view class="num-wrapper">
                    <text class="num">{{item.vipCardMemberLogType === 1 ? (item.vipCardMemberLogBorrowFrequency) : getRestDay(item).restDay}}</text>
                    {{item.vipCardMemberLogType === 1 ? '次' : '天'}}
                </view>
                <view class="rest">{{item.vipCardMemberLogType === 1 ? '当前可借次数' : '剩余时长'}}</view>
                <view class="lend">{{item.vipCardMemberLogType === 1 ? '已借次数' : '已用天数'}}：{{item.vipCardMemberLogType === 1 ? (item.vipCardMemberLogBorrowFrequencyTrue+'次') : (getRestDay(item).hasDay+'天')}}</view>
            </view>
            <view>
                <view class="num-wrapper">
                    <text class="num">{{item.vipCardMemberLogBooksNum}}</text>
                    本
                </view>
                <view class="rest">当前可借数量</view>
                <view class="lend">在借数量：{{item.vipCardMemberLogBooksNumTrue}}本</view>
            </view>
        </view>
        <view class="time common-flex-between">
            <text>有效期： {{ item.vipCardMemberLogActivationTime | formatTime }}至{{ item.vipCardMemberLogEndTime | formatTime }}</text>
            <view class="btn-box" @tap="watchDetail">
                <text>{{btnText}}</text>
            </view>
        </view>
    </view>
</template>

<script>
    import { dateFmt,returntime } from '@/util/utils';
    export default {
        name: "card",
        props: {
            item: {
                type: Object,
                default: ()=>{
                    type: 'subCard'
                }
            },
            type: { // 卡是有效或者无效
                type: Number,
                default: 1
            },
            btnText: {
                type: String,
                default: '查看详情'
            }
        },
        data(){
            return{
                vipCard: [
                    {
                        isChecked: false,
                        type: 'subCard'
                    },
                    {
                        isChecked: false,
                        type: 'timeCard'
                    }
                ],
                vipBack: ['vip-sub1', 'vip-time']
            }
        },
        methods: {
            watchDetail(){
                this.$store.commit('userVipInfo', this.item);
                this.$emit('watchDetail', this.item.vipCardMemberLogId,this.item)
            },
            getBack(cardType){
                if(this.type===3){
                    return `url(${this.$https}vip-invalid.png)`
                }
                return cardType === 1 ? `url(${this.$https}vip-sub1.png)` : `url(${this.$https}vip-time.png)`
            },
            getRestDay(item){
                let activeTime = new Date(Number(item.vipCardMemberLogActivationTime +'000')).getTime()
                let nowTime = new Date().getTime()
                let hasDay = Math.floor((nowTime - activeTime)/86400000)

                return {
                    hasDay: this.type === 1 ? hasDay: item.vipCardMemberLogDate,
                    restDay: this.type === 1 ? item.vipCardMemberLogDate - hasDay : 0
                }


            }
        },
        filters: {
            formatTime(value){
                return dateFmt( Number(value+'000'), 'yyyy-MM-dd')
            },
            returntime
        }
    }
</script>

<style scoped lang="scss">
    .btn-box{
        padding: 5rpx 10rpx;
        box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.5);
    }
    .card{
        width: 100%;
        height:332rpx;
        box-shadow:0px 6rpx 10rpx rgba(18,144,245,0.2);
        opacity:1;
        border-radius:10rpx;
        padding: 20rpx 30rpx;
        box-sizing: border-box;
        color: #fff;
        background-size: cover;
    }
    .check-btn{
        color: #D8D8D8;
        margin-left: 20rpx;
        font-size: 40rpx;
    }
    .title{
        font-size: 23rpx;
        font-weight: bold;
        .icon-btn{
            margin-right: 10rpx;
            font-size: 40rpx;
            color: #ffffff;
        }
    }
    .content{
        margin-top: 40rpx;
        .num-wrapper{
            font-size: 24rpx;
        }
        .num{
            font-size: 52rpx;
        }
        .rest{
            font-size: 24rpx;
            margin-top: 10rpx;
        }
        .lend{
            font-size: 24rpx;
            color: rgba(255,255,255,0.6);
        }
    }
    .time{
        font-size: 24rpx;
        color: rgba(255,255,255,0.8);
        margin-top: 30rpx;
    }
</style>